import React, {Component} from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { 
    HeaderWrapper, 
    Logo, 
    Nav, 
    NavItem, 
    NavSearch, 
    SearchWrapper, 
    Adition, 
    Button, 
    SearchInfo, 
    SearchInfoTitle, 
    SearchInfoSwitch,
    SearchInfoItem
} from './style';
import { searchBlur, searchFocus, getList, mouseEnter, mouseLeave, pageChangeList} from './store/actionCreator'
import { logout } from '../../pages/login/store/createActions';

// 获取SearchInfo列表


class Header extends Component{
     getListArea = () => {
        const pageList = []
        // 转换immutable对象
        const newList = this.props.list.toJS()
        for(var i = (this.props.page-1)*10; i<this.props.page*10;i++){
            if (newList[i] ===undefined) continue;
            pageList.push(
                <SearchInfoItem key={newList[i]+i}>{newList[i]}</SearchInfoItem>
            )
        }
        if(this.props.focused || this.props.mouseIn){
            return (
                <SearchInfo 
                onMouseEnter={this.props.handleMouseEnter}
                onMouseLeave={this.props.handleMouseLeave}
                >
                    <SearchInfoTitle>热门搜索
                        <SearchInfoSwitch onClick={ () => this.props.handleChangePage(this.props.totalPage, this.props.page)}>换一批</SearchInfoSwitch>
                    </SearchInfoTitle>
                    <div>
                        {pageList}
                    </div>
                </SearchInfo>
            )
        }
    }
    render(){
        return (
            <HeaderWrapper>
                <Link to="/">
                    <Logo />
                </Link>
                <Nav>
                    <NavItem className='left active'>首页</NavItem>
                    <NavItem className='left'>下载App</NavItem>
                    <SearchWrapper>
                        <NavSearch className={this.props.focused? 'focus': ''}
                            onFocus={() =>  this.props.handleFocus(this.props.list)}
                            onBlur={this.props.handleBlur}
                        />
                        <i className="iconfont">&#xe623;</i>
                        {this.getListArea()}

                        
                    </SearchWrapper>
                    <NavItem className='right'>
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    {this.props.login?<NavItem className='right' onClick={() => this.props.logout()}>退出</NavItem>:
                    
                    <Link to='/login'>
                        <NavItem className='right'>登录</NavItem>
                    </Link> }
                    
                </Nav>
                <Adition>
                    <Button className='reg'>写文章</Button>
                    <Button className='writting'>
                    <i className="iconfont">&#xe708;</i>注册
                    </Button>
                </Adition>
            </HeaderWrapper>
        )
    }
}

   

const mapStateToProps = (state) => {
    return {
        // focused: state.header.focused
        // 使用immutabled 
        focused: state.header.get('focused'),
        list: state.header.get('list'),
        totalPage: state.header.get('totalPage'),
        page: state.header.get('page'),
        mouseIn: state.header.get('mouseEnter'),
        login: state.login.get('login')

    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        handleFocus(list) {
            dispatch(searchFocus())
            // 请求优化，减少不必要的请求
            if(list.size===0)
             dispatch(getList())
        },
        handleBlur() {
            dispatch(searchBlur())
        },
        handleMouseEnter() {
            dispatch(mouseEnter())
        },
        handleMouseLeave(){
            dispatch(mouseLeave())
        },
        handleChangePage(total, page){
            if(page < total){
                dispatch(pageChangeList(page+1))
            }else{
                dispatch(pageChangeList(1))
            }
        },
        logout() {
            dispatch(logout())
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)